#clock{
    width:600px;
    height: 600px;
    border: solid 1px black;
    margin: 20px auto;
    background-image: url(1.jpg);
    background-size: 100% 100%;
    position: relative;
} 
.point{
    position: absolute;    
}
@keyframes spin{
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}
#sp{
    width:2px;
    height:233px;
    background-color: red;
    left: 299px;
    top: 90px;
    /* 设置动画 */
    animation-name: spin;
    animation-duration: 60s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* 设置元素的变形原点 */
    transform-origin: 50% 90%;
}
#mp{
    width: 6px;
    height: 190px;
    background-color: grey;
    left: 297px;
    top: 125px;
    /* 设置动画 */
    animation-name: spin;
    animation-duration: 3600s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* 设置元素的变形原点 */
    transform-origin: 50% 91.5%;
    border-top-right-radius: 3px 100px;
    border-top-left-radius: 3px 100px;
}
#hp{
    width: 10px;
    height:140px;
    background-color: black;
    left:295px;
    top: 170px;
    /* 设置动画 */
    animation-name: spin;
    animation-duration: 43200s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* 设置元素的变形原点 */
    transform-origin: 50% 92.5%;
    border-top-right-radius: 5px 140px;
    border-top-left-radius: 5px 140px;
}
#dian{
    width: 14px;
    height: 14px;
    background-color: red;
    border-radius: 7px;
    top:293px;
    left: 293px;
}





